<!-- html -->
<template>
  <h2 class="h2">shallowReadonly，浅层次只读</h2>
  <span class="span3">ref</span>
  <br>
  <span class="span2">num1：{{ num1 }}</span>
  <button class="button1" @click="changeNum1">修改num1</button>
  <br>
  <span class="span2">first：{{ obj1.first }}，second：{{ obj1.second.name }}</span>
  <button class="button1" @click="changeObj1First">修改first</button>
  <button class="button1" @click="changeObj1Second">修改second</button>
  <hr class="hr1">
  <span class="span3">shallowReadonly</span>
  <br>
  <span class="span2">num2：{{ num2 }}</span>
  <button class="button1" @click="changeNum2">修改num2</button>
  <br>
  <span class="span2">first：{{ obj2.first }}，second：{{ obj2.second.name }}</span>
  <button class="button1" @click="changeObj2First">修改first</button>
  <button class="button1" @click="changeObj2Second">修改second</button>
</template>

<!-- js或ts -->
<script lang="ts">
export default {
  name: 'shallowReadonlyTest1'
}
</script>

<!-- js或ts -->
<script setup lang="ts">
import { ref, reactive, shallowReadonly } from 'vue'
//数据
let num1 = ref(1)
let num2 = shallowReadonly(num1)
let obj1 = reactive({ first: '我是第一层数据', second: { name: '我是第二层数据' } })
let obj2 = shallowReadonly(obj1)
//方法
function changeNum1() {
  num1.value += 1
}
function changeObj1First() {
  obj1.first += '-'
}
function changeObj1Second() {
  obj1.second.name += '-'
}
function changeNum2() {
  num2.value += 1
}
function changeObj2First() {
  obj2.first += '-'
}
function changeObj2Second() {
  obj2.second.name += '-'
}
</script>

<!-- 样式 -->
<style scoped></style>